<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="titleBox">
      <!-- icon-dingdan -->
      <div class="iconfontcolor icon-dingdan"></div>
      <div class="infoBox">

        <div class="info_line1">
          <h3 class="tit">{{ result.statementOdd }}</h3>
          <div class="tag" v-if="this.smentStatus == 0">已核算</div>
          <div class="tag yellow" v-if="this.smentStatus == 1">待核算</div>

        </div>
        <div class="info_line2">
          <div style="margin-right: 15px">创建时间：{{ result.statementTime }}</div>
        </div>
      </div>
      <div class="feeGroup" v-show="this.smentStatus == 0">
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">核算司机费用</div>
            <div class="price">{{ result.billAmount }}</div>
          </div>
        </div>
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">核算异常扣款</div>
            <div class="price">{{ result.abnormalDeduction }}</div>
          </div>
        </div>
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">核算司机金额</div>
            <div class="price" style="color: #1890ff">{{ result.settlementAmount }}</div>
          </div>
        </div>
      </div>

      <button class="examineBtn" v-show="this.smentStatus == 1" @click="isShowDialog()">
        <i class="iconfont icon-hetongguanli2"></i>
        <span>核算</span>
      </button>
    </div>

    <div class="main">
      <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
        <el-tab-pane label="结算单信息" name="first">
          <div class="main_item">
            <SettlementOrderInfo :data="result" ref="child"></SettlementOrderInfo>
          </div>
        </el-tab-pane>
        <el-tab-pane label="运单信息" name="second">
          <div class="main_item">
            <WaybillInfo :waybillId="waybillId"></WaybillInfo>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import WaybillInfo from "./subSettlementDocDetails/WaybillInfo.vue";
import SettlementOrderInfo from "./subSettlementDocDetails/SettlementOrderInfo.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
export default {
  data() {
    return {
      result: {

      },
      smentStatus: '',
      activeName: "first",
      dialogVisible: false,
      oderState: 0,//假数据 核算状态
      waybillId: "",
    };

  },
  methods: {
    handleClick() { },
    initDetails() {
      this.driverBillId = this.$route.params.driverBillId;
      let params = { driverBillId: this.driverBillId };
      httpApi.SettlementDocApi.getStatementAccountDetails(params).then(res => {
        if (res.data.code = 200) {
          this.result = res.data.data;
          this.smentStatus = this.result.settlementStatus
          this.waybillId = res.data.data.waybillId
        }
      })
    },

    isShowDialog() {
      this.$refs.child.openDialog()
    }
  },
  mounted() {
    this.initDetails();
  },
  components: {
    breadcrumb,
    SettlementOrderInfo,
    WaybillInfo,
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  flex: 1;
  background-color: #fff;
  height: 119px;
  display: flex;
  align-items: center;
  padding: 0 35px;
  margin-bottom: 9px;

  .feeGroup {
    margin-left: auto;
    display: flex;

    .feeBox {
      display: flex;
      width: 180px;
      align-items: center;


      .intervalLine {
        width: 2px;
        height: 64px;
        background-color: #f0f0f0;
        margin-right: 20px;
      }

      .feeItem {
        display: flex;
        flex-direction: column;
        margin-right: 20px;

        .tit {
          color: #a3a3a3;
          font-size: 12px;
          margin-bottom: 14px;
        }

        .price {
          color: #262626;
          font-size: 18px;
          font-weight: Bold;
        }
      }
    }
  }

  .icon-dingdan {
    font-size: 43px;
    margin-right: 10px;
  }

  .infoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .info_line1 {
      margin-bottom: 3px;
      display: flex;
      align-items: center;

      >.tit {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 8px;
        color: #262626;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 54px;
        height: 20px;
        color: #1890ff;
        font-size: 10px;
        text-align: center;
        line-height: 20px;

        &.yellow {
          color: #F8B030;
          background-color: #FFFCE8;
        }
      }
    }

    .info_line2 {
      display: flex;
      color: #939393;
      font-size: 12px;
    }
  }

  .examineBtn {
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    width: 80px;
    height: 36px;
    cursor: pointer;
    margin-left: auto;

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }

    .icon-hetongguanli {
      font-size: 15px;
      margin-right: 6px;
      color: #ffffff;
    }
  }
}

.main {
  background-color: #fff;

  .mainTabs {
    ::v-deep .el-tabs__nav {
      margin-left: 38px;
    }

    // 标签页切换按钮
    ::v-deep .el-tabs__item {
      height: 50px;
      width: 88px;
      text-align: center;
      padding: 0;
      line-height: 50px;
      font-size: 12px;
      font-weight: bold;
      color: #939393;
    }

    // 下边框
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #f0f0f0;
    }

    // 标签页切换按钮 激活样式
    ::v-deep .el-tabs__item.is-active {
      background-color: #ecf5fe;
      color: #1890ff;
    }
  }

  .main_item {
    padding: 31px 30px 36px 30px;

    .descriptionsInfo {
      .picBox {
        width: 80px;
        height: 60px;
        border-radius: 6px;

        .pic {
          width: 80px;
          height: 60px;
        }
      }
    }

    .ShippingReceiving_head {
      width: 100%;
      display: flex;
      font-size: 12px;
      margin-bottom: 16px;

      .info_item {
        display: flex;

        .label {
          margin-right: 22px;
          color: #939393;
          height: 16px;
        }

        .value {
          display: flex;
          align-items: center;

          .text {
            color: #262626;
            height: 16px;
          }
        }
      }
    }
  }
}</style>
